<template>
  <div class="add-address-content">
    <el-form ref="formRef" class="ls-form" :model="formData" label-width="auto" :rules="rules">
      <el-form-item prop="name">
        <el-input v-model="formData.name" placeholder="请输入收货人姓名" />
      </el-form-item>
      <el-form-item prop="email">
        <el-input v-model="formData.email" placeholder="邮箱" />
      </el-form-item>
      <el-form-item prop="phone">
        <el-input
            v-model="formData.phone"
            style="max-width: 600px"
            placeholder="请设置手机号码"
            class="input-with-select"
        >
        </el-input>
      </el-form-item>
      <div class="check_address">
        <el-form-item prop="code" style="flex: 1;">
          <el-select v-model="formData.area" placeholder="国家">
            <el-option label="Restaurant" value="1" />
            <el-option label="Order No." value="2" />
            <el-option label="Tel" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item prop="code" style="flex: 1;">
          <el-select v-model="formData.area" placeholder="省/州/邦">
            <el-option label="Restaurant" value="1" />
            <el-option label="Order No." value="2" />
            <el-option label="Tel" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item prop="code" style="flex: 1;">
          <el-select v-model="formData.area" placeholder="城市">
            <el-option label="Restaurant" value="1" />
            <el-option label="Order No." value="2" />
            <el-option label="Tel" value="3" />
          </el-select>
        </el-form-item>
      </div>
      <el-form-item prop="code">
        <el-input v-model="formData.code" placeholder="邮编" />
      </el-form-item>
      <el-form-item prop="address">
        <el-input v-model="formData.address" placeholder="详细地址" type="textarea" />
      </el-form-item>
      <el-form-item prop="code">
        <div class="flex-between" style="width: 100%;">
          <span>设为默认值</span>
          <el-switch />
        </div>
      </el-form-item>
    </el-form>
    <el-button type="primary" block>确定</el-button>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const formRef = ref()
const formData = reactive({
  name: '',
  email: '',
  code: '',
  address: '',
  phone: '',
  area: ''
})
const rules = {
  name: [{ required: true, message: '收货人姓名必填', trigger: 'blur' }],
  email: [{ required: true, message: '邮箱必填', trigger: 'blur' }],
  code: [{ required: true, message: '邮编必填', trigger: 'blur' }],
  address: [{ required: true, message: '详细地址必填', trigger: 'blur' }],
}
</script>
<style scoped>
.add-address-content .check_address {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.add-address-content .form-phone .area-code {
  width: 80px;
}
:deep(.el-button){
    display: block;
    width: 100%;
    height: 50px;
    max-width: 450px;
    padding: 0;
    margin: 0 auto;
}
</style>